<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>值绑定</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .row { line-height: 30px ; margin: 5px auto ; }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

    <div class="container" id="app">
        <div class="row border">
            <div class="col-2">复选框</div>
            <div class="col-4">
                <input type="checkbox" v-model="isAgree" true-value="yes" false-value="no" id="agreement1">
                <label for="agreement1">你勾或者不勾试试</label>
            </div>
            <div class="col-2">{{isAgree}}</div>
        </div>
        <div class="row border">
            <div class="col-2">复选框</div>
            <div class="col-4">
                <input type="checkbox" v-model="agree" :true-value="trueValue" :false-value="falseValue" id="agreement2">
                <label for="agreement2">你勾或者不勾试试</label>
            </div>
            <div class="col-2">{{agree}}</div>
        </div>
        <div class="row border">
            <div class="col-2">单选按钮</div>
            <div class="col-4">
                <span v-for="a in array">
                    <input type="radio" v-model="gender" :value="a.value" :id="a.id">
                    <label :for="a.id">{{a.text}}</label>
                </span>
            </div>
            <div class="col-2">{{gender}}</div>
        </div>
        <div class="row border">
            <div class="col-2">下拉框</div>
            <div class="col-4">
                <select v-model="hometown" @change="handler">
                    <option v-for="h in hometowns" :value="h">{{h.text}}</option>
                </select>
            </div>
            <div class="col-6">{{hometown.text}}</div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    isAgree: 'no',
                    agree: '真',
                    trueValue: '真',
                    falseValue: '假',
                    array: [
                        {id: 'maleGender', value: 'male', text: '靓仔'},
                        {id: 'femaleGender', value: 'female', text: '靓妹'}
                    ],
                    gender: 'female',
                    hometowns: [
                        {value: 'wuwei', text: '武威'},
                        {value: 'lanzhou', text: '兰州'},
                        {value: 'tianshui', text: '天水'},
                        {value: 'chengdu', text: '成都'},
                        {value: 'lintao', text: '临洮'}
                    ],
                    hometown: ''
                }
            },
            methods: {
                handler(event){
                    console.log( vm );
                    console.log( vm.selected );
                    console.log( event.target.selectedIndex ); // 原生JavaScript
                }
            }
        });

        const vm = app.mount( '#app' );
    </script>

    </body>
</html>